<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <script src="/static/jquery-1.11.1.min.js"></script>

    <script src="/static/bootstrap/js/bootstrap.min.js"></script>
    <script src="/static/webuploader/webuploader.min.js"></script>


{#    <script src="https://cdn.jsdelivr.net/npm/webuploader@0.1.8/dist/webuploader.fis.min.js"></script>#}
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/webuploader@0.1.8/css/webuploader.css">
    <link rel="stylesheet" type="text/css" href="/static/bootstrap/css/bootstrap.min.css">


    <style>
        .progress {
            height: 100px;
            margin-bottom: 20px;
            overflow: hidden;
            background-color: #f5f5f5;
            border-radius: 4px;
            -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.1);
            box-shadow: inset 0 1px 2px rgba(0,0,0,.1);
        }
        .progress-bar {
            font-size: 50px;
            line-height: 80px;

        }
    </style>
    <script type="text/javascript">
            $(document).ready(function() {
                var uploader = WebUploader.create({           //创建上传控件
                    swf: '/static/webuploader/Uploader.swf',  //swf位置，这个可能与flash有关
                    server: '/console/file_upload?complect=0',//接收每一个分片的服务器地址
                    pick: '#picker',                          //填上传按钮的id选择器值
                    auto: true,                               //选择文件后，是否自动上传
                    chunked: true,                            //是否分片
                    chunkSize: 20 * 1024 * 1024,              //每个分片的大小，这里为20M
                    chunkRetry: 3,                            //某分片若上传失败，重试次数
                    threads: 1,                               //线程数量，考虑到服务器，这里就选了1
                    duplicate: true,                          //分片是否自动去重
                });

                uploader.on('startUpload', function() {       //开始上传时，调用该方法
                    //在此处产生 task_id
                    this.options['formData'] = {
                        'task_id' : WebUploader.Base.guid()
                    }
                    $('.progress-bar').css('width', '0%');
                    $('.progress-bar').text('0%');
                });

                uploader.on('uploadProgress', function(file, percentage) { //一个分片上传成功后，调用该方法
                    $('.progress-bar').css('width', percentage * 100 - 1 + '%');
                    $('.progress-bar').text(Math.floor(percentage * 100 - 1) + '%');
                });

                uploader.on('uploadSuccess', function(file) { //整个文件的所有分片都上传成功，调用该方法
                    //上传的信息（文件唯一标识符，文件后缀名）
                    task_id = this.options['formData']['task_id']
                    var data = {'task_id': task_id, 'type': file.source['type'], 'filename': file.name};
                    $.post('/console/file_upload?complect=1', data);          //ajax携带data向该url发请求
                    $('.progress-bar').css('width', '100%');
                    $('.progress-bar').text('上传完成');
                });

                uploader.on('uploadError', function(file) {   //上传过程中发生异常，调用该方法
                    $('.progress-bar').css('width', '100%');
                    $('.progress-bar').text('上传失败');
                });

                uploader.on('uploadComplete', function(file) {//上传结束，无论文件最终是否上传成功，该方法都会被调用
                    $('.progress-bar').removeClass('active progress-bar-striped');
                });



            });

            function viewSharing() {
                url = "/console/view_files"
                $("#data").html("")
                $.get(url,function (data) {
                    $("#data").html(data)
                })
            }

    </script>
</head>

<body>
        <div class="progress">         <!-- 进度条 -->
            <div class="progress-bar progress-bar-striped active" role="progressbar" style="width:0%;"></div>
        </div>
        <div id="picker">选择文件</div>   <!-- 上传按钮，必须指定id选择器的值 -->

        <h3><button  onclick="viewSharing(this)">查看共享文件夹</button></h3>

        <div id="data">

        </div>

</body>

</html>